<template>
  <div>
    <div>
      <van-nav-bar >
        <van-icon name="arrow-left" slot="left" size="34px" color="#101010" @click="onClickLeft"></van-icon>
        <van-icon name="ellipsis" slot="right" size="20" color="#101010" @click="onClickRight"/>
      </van-nav-bar>
      <van-action-sheet
        v-model="show"
        :actions="actions"
        @select="onSelect"
      />
    </div>
      <div class="item">
        <div class="item-box">
          <div class="item-top">
            <h2 style=" ">aaaaaa</h2>
            <p>训练概述</p>
            <p>胸部</p>
            <p>xxxxx</p>
            <p>一个动作，不循环，小于1分钟</p>
            <div class="item-mid">
              <h2 >动作列表</h2>
              <div>
                <div class="mid-l">
                  <img src="">
                </div>
                <div class="mid-r">
                  <p>俯卧撑</p>
                  <p>x15</p>
                  <p>休息15秒</p>
                </div>
              </div>
            </div>
          </div>

        </div>
      <div class="item-last">

      </div>
    </div>
    <div class="btn">
      <van-button type="danger" size="large">开始训练</van-button>
    </div>
  </div>
</template>
<script>
  export default {
    name:'traitem',
    data(){
      return{
        show:false,
        actions: [
          { name: '从首页中移除' },
          { name: '编辑' },
          { name: '删除' },
          { name: '发布到广场'}
        ]
      }
    },
    methods:{
      onClickLeft(){
        this.$router.go(-1)
      },
      onClickRight(){
        this.show=true
      },
      onSelect(item) {
        // 点击选项时默认不会关闭菜单，可以手动关闭
        this.show = false;
        console.log(item.name);    //点击事件    item为应用的对象  index为索引
      }
    }
  }
</script>
<style scoped>
  .btn{
    position: fixed;bottom: 0;width: 100%;
  }
  .item{border-bottom: 1px solid #eeeeee;padding-bottom: 15px}
  .item-box{padding:  10px 10px 0 10px; box-sizing: border-box;}
  .item-top h2{
   font-size: 18px;line-height: 36px;
  }
  .item-top p{
    line-height: 34px;font-size: 12px;
  }
  .item-mid{
    margin-top: 13px;
  }

  .mid-l{
    float: left;height: 64px;width: 110px;
  }
  .mid-r{
    float: left;
  }
  .mid-r p{
    line-height: 18px;margin-left: 10px;margin-top: 2px;
  }
  .item-mid:before,.item-mid:after{content:" ";display:table}
  .item-mid:after{clear:both}
</style>
